<template>
	<div class="box1">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<ul class="list">
						<li>
							<p>今日利润</p>
							<p>${{sy}}</p>
						</li>
						<li>
							<p>今日销售</p>
							<p>${{xs}}</p>
						</li>
					</ul>
				</div>
				<div class="swiper-slide">
					<ul class="list">
						<li>
							<p>昨日利润</p>
							<p>$0</p>
						</li>
						<li>
							<p>昨日销售</p>
							<p>$0</p>
						</li>
					</ul>
				</div>
				<div class="swiper-slide">
					<ul class="list">
						<li>
							<p>本月利润</p>
							<p>$0</p>
						</li>
						<li>
							<p>本月销售</p>
							<p>$0</p>
						</li>
					</ul>
				</div>
				<div class="swiper-slide">
					<ul class="list">
						<li>
							<p>上月利润</p>
							<p>$0</p>
						</li>
						<li>
							<p>上月销售</p>
							<p>$0</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from "swiper";
	export default {
		name: "homepageswiper",
		//挂载swiper对象
    data(){
      return{
        sy:0,
        xs:0
      }
    },
		mounted() {
			var mySwiper = new Swiper('.swiper-container', {
			});
      var obj=JSON.parse(window.localStorage.getItem("money"))
      this.sy=Math.ceil(obj.sy)
      this.xs=obj.xs
		},
	}
</script>

<style scoped="scoped">
	.list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: center;
	}

	.list li {
		width: 50%;
		text-align: center;
		line-height: 20px;
		margin: 10px;
	}

	.list li:nth-child(1) {
		border-right: 1px solid white;
	}

	.box1 {
		background-color: lightblue;
		color: white;
		padding-top: 10%;
		padding-bottom: 5%;
	}
</style>
